<template>
  <div class="home-container" :class="{ 'light-mode': !isDarkMode }">
    <!-- 顶部导航 -->
    <header class="header">
      <div class="logo">言映,一念成片，智启视界</div>
      <div class="search-bar">
        <input type="text" placeholder="搜索视频、模板或提示词..." />
      </div>
      <div class="user-info">
        <!-- 主题切换按钮 -->
        <button @click="toggleTheme" class="theme-toggle-btn">
          <span v-if="isDarkMode">☀️</span>
          <span v-else>🌙</span>
        </button>

        <!-- 设置按钮 -->
        <router-link to="/home/settings" class="settings-btn">
          <span>⚙️</span>
        </router-link>

        <!-- 个人主页按钮 -->
        <div class="profile-dropdown" @click="toggleDropdown" ref="profileDropdown">
          <div class="profile-btn">
            <div class="profile-icon">
              <img src="@/assets/image/avatar.png" alt="用户头像" />
            </div>
            <div class="username">张小明</div>
          </div>

          <!-- 下拉菜单 -->
          <div v-show="isDropdownOpen" class="dropdown-menu">
            <div class="dropdown-header">
              <div class="dropdown-profile-icon">
                <img src="@/assets/image/avatar.png" alt="用户头像" />
              </div>
              <div class="dropdown-user-info">
                <div class="dropdown-username">张小明</div>
                <div class="dropdown-user-email">zhangxiaoming@example.com</div>
              </div>
            </div>
            <div class="dropdown-divider"></div>
            <div class="dropdown-item">
              <router-link to="/profile" class="dropdown-link">个人资料</router-link>
            </div>
            <div class="dropdown-item">
              <router-link to="/profile/settings" class="dropdown-link">账户设置</router-link>
            </div>
            <div class="dropdown-item">
              <router-link to="/profile/billing" class="dropdown-link">账单信息</router-link>
            </div>
            <div class="dropdown-divider"></div>
            <div class="dropdown-item">
              <button @click="logout" class="dropdown-link logout-btn">退出登录</button>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
      <!-- 左侧导航 -->
      <aside class="sidebar">
        <nav class="nav-menu">
          <router-link to="/home/dashboard" class="nav-item" :class="{ active: $route.path === '/home/dashboard' || $route.path === '/home' }">
            <span class="icon">📋</span>
            <span class="label">控制台</span>
          </router-link>
          <router-link to="/home/generate" class="nav-item" :class="{ active: $route.path === '/home/generate' }">
            <span class="icon">🎬</span>
            <span class="label">生成视频</span>
          </router-link>
          <router-link to="/home/library" class="nav-item" :class="{ active: $route.path === '/home/library' }">
            <span class="icon">📁</span>
            <span class="label">视频库</span>
          </router-link>
          <router-link to="/home/discover" class="nav-item" :class="{ active: $route.path === '/home/discover' }">
            <span class="icon">🔍</span>
            <span class="label">发现</span>
          </router-link>
          <router-link to="/home/templates" class="nav-item" :class="{ active: $route.path === '/home/templates' }">
            <span class="icon">🎨</span>
            <span class="label">视频模板</span>
          </router-link>
          <router-link to="/home/youtube" class="nav-item" :class="{ active: $route.path === '/home/youtube' }">
            <span class="icon">🎵</span>
            <span class="label">YouTube</span>
          </router-link>
          <router-link to="/home/instagram" class="nav-item" :class="{ active: $route.path === '/home/instagram' }">
            <span class="icon">📸</span>
            <span class="label">Instagram</span>
          </router-link>
          <router-link to="/home/tiktok" class="nav-item" :class="{ active: $route.path === '/home/tiktok' }">
            <span class="icon">🎵</span>
            <span class="label">TikTok</span>
          </router-link>
          <router-link to="/home/settings" class="nav-item" :class="{ active: $route.path === '/home/settings' }">
            <span class="icon">⚙️</span>
            <span class="label">设置</span>
          </router-link>
        </nav>
      </aside>

      <!-- 右侧内容 -->
      <div class="content-area">
        <!-- 嵌套路由容器 -->
        <router-view />
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRoute } from 'vue-router';

const route = useRoute();

// 主题状态
const isDarkMode = ref(false);
const toggleTheme = () => {
  isDarkMode.value = !isDarkMode.value;
};

// 下拉菜单状态
const isDropdownOpen = ref(false);
const profileDropdown = ref<HTMLElement | null>(null);

// 切换下拉菜单
const toggleDropdown = () => {
  isDropdownOpen.value = !isDropdownOpen.value;
};

// 关闭下拉菜单
const closeDropdown = (event: MouseEvent) => {
  if (profileDropdown.value && !profileDropdown.value.contains(event.target as Node)) {
    isDropdownOpen.value = false;
  }
};

// 退出登录
const logout = () => {
  // 这里可以添加退出登录的逻辑
  console.log("用户退出登录");
  isDropdownOpen.value = false;
};

// 点击外部关闭下拉菜单
document.addEventListener('click', closeDropdown);

// 组件卸载时移除事件监听器
// 在Vue 3的组合式API中，可以使用onUnmounted生命周期钩子
import { onUnmounted } from 'vue';
onUnmounted(() => {
  document.removeEventListener('click', closeDropdown);
});
</script>

<style scoped lang="scss">
.home-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #0d1b2a;
  color: #ffffff;

  &.light-mode {
    background-color: #f8f9fa;
    color: #333333;

    .header {
      background-color: #ffffff;
      border-bottom: 1px solid #e9ecef;

      .logo {
        color: #667eea;
      }

      .search-bar input {
        background-color: #f8f9fa;
        color: #333333;
      }
    }

    .sidebar {
      background-color: #ffffff;
      border-right: 1px solid #e9ecef;

      .nav-item {
        color: #6c757d;

        &:hover {
          background-color: #f8f9fa;
          color: #333333;
        }

        &.active {
          background-color: #e9ecef;
          color: #667eea;
          border-left-color: #667eea;
        }
      }
    }

    .content-area {
      padding: 2rem;
      overflow-y: auto;
    }
  }
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #0a1525;
  border-bottom: 1px solid #1a2c40;

  .logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #667eea;
  }

  .search-bar {
    flex: 1;
    max-width: 500px;
    margin: 0 2rem;

    input {
      width: 100%;
      padding: 0.5rem;
      border-radius: 20px;
      border: none;
      background-color: rgba(255, 255, 255, 0.1);
      color: white;
      outline: none;

      &:focus {
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3);
      }
    }
  }

  .user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;

    .theme-toggle-btn,
    .settings-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.5rem;
      border-radius: 50%;
      transition: all 0.3s ease;

      &:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }
    }

    .theme-toggle-btn {
      font-size: 1.2rem;
      color: #b0bec5;
    }

    .settings-btn {
      font-size: 1.2rem;
      color: #b0bec5;
    }

    .profile-dropdown {
      position: relative;
      cursor: pointer;

      .profile-btn {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
        color: white;

        .profile-icon {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .username {
          font-size: 0.9rem;
          color: #c20cdf;
        }
      }

      .dropdown-menu {
        position: absolute;
        top: 100%;
        right: 0;
        width: 250px;
        background-color: #0a1525;
        border: 1px solid #1a2c40;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        margin-top: 0.5rem;

        &.light-mode {
          background-color: #ffffff;
          border-color: #e9ecef;
        }

        .dropdown-header {
          display: flex;
          align-items: center;
          padding: 1rem;

          .dropdown-profile-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 1rem;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .dropdown-user-info {
            .dropdown-username {
              font-weight: bold;
              margin-bottom: 0.25rem;
            }

            .dropdown-user-email {
              font-size: 0.8rem;
              color: #b0bec5;
            }

            .light-mode & .dropdown-user-email {
              color: #6c757d;
            }
          }
        }

        .dropdown-divider {
          height: 1px;
          background-color: #1a2c40;
          margin: 0.5rem 0;

          .light-mode & {
            background-color: #e9ecef;
          }
        }

        .dropdown-item {
          padding: 0.5rem 1rem;

          .dropdown-link {
            display: block;
            width: 100%;
            text-align: left;
            text-decoration: none;
            color: #b0bec5;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.9rem;
            padding: 0.5rem 0;
            transition: color 0.3s ease;

            &:hover {
              color: white;
            }

            &.logout-btn:hover {
              color: #f56565;
            }

            .light-mode & {
              color: #6c757d;

              &:hover {
                color: #333333;
              }

              &.logout-btn:hover {
                color: #f56565;
              }
            }
          }
        }
      }
    }
  }
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.sidebar {
  width: 200px;
  background-color: #0a1525;
  border-right: 1px solid #1a2c40;
  padding: 1rem 0;

  .nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;

    .nav-item {
      display: flex;
      align-items: center;
      padding: 0.75rem 1rem;
      text-decoration: none;
      color: #b0bec5;
      transition: all 0.3s ease;
      border-left: 3px solid transparent;

      &:hover {
        background-color: rgba(255, 255, 255, 0.05);
        color: white;
      }

      &.active {
        background-color: rgba(102, 126, 234, 0.1);
        color: #667eea;
        border-left-color: #667eea;
      }

      .icon {
        margin-right: 0.75rem;
        font-size: 1.2rem;
      }

      .label {
        font-size: 0.9rem;
      }
    }
  }
}

.content-area {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
}
</style>
